import {Component, ElementRef, OnInit} from '@angular/core';

@Component({
    selector: 'app-compass-clock',
    templateUrl: './compass-clock.component.html',
    styleUrls: ['./compass-clock.component.less']
})
export class CompassClockComponent implements OnInit {
    public year: string;
    public date: any; // 当前日期
    public hours: any = [];
    public hoursMap: any = [];
    public hourRotate: any;
    public hourDom: any;

    public minutes: any = [];
    public minutesMap: any = [];
    public minuteRotate: any;
    public minuteDom: any;

    public seconds: any = [];
    public secondsMap: any = [];
    public secondRotate: any;
    public secondDom: any;
    constructor(private el: ElementRef) {

    }

    ngOnInit() {
        this.secondDom = this.el.nativeElement.querySelector('.second');
        this.minuteDom = this.el.nativeElement.querySelector('.minute');
        this.hourDom = this.el.nativeElement.querySelector('.hour');
        this.getClockData();
        this.date = this.getDate();
        this.getRotate();
        this.start();
    }
    // 初始化时钟数据
    getClockData() {
        for (let i = 1; i <= 24; i++) {
            this.hours.push({
                label: this.convertNum(i, '时'),
                rotate: 375 - i * 15
            });
            this.hoursMap.push([i, (i - 1) * 15]);
        }
        for (let j = 1; j <= 60; j++) {
            this.minutes.push({
                label: this.convertNum(j, '分'),
                rotate: 366 - j * 6
            });
            this.minutesMap.push([j, (j - 1) * 6]);
            this.seconds.push({
                label: this.convertNum(j, '秒'),
                rotate: 366 - j * 6
            });
            this.secondsMap.push([j, (j - 1) * 6]);
        }
    }
    // 获取当前时间
    getDate() {
        const date = new Date();
        function addZero(val) {
            if (val < 10) {
                val = '0' + String(val);
            }
            return val;
        }
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        return {
            year: this.convertNum(year, '年'),
            month: this.convertNum(month, '月'),
            day: this.convertNum(day, '日'),
            hour: hour,
            minute: minute,
            second: second
        };
    }
    // 通过当前时间获取旋转角度
    getRotate() {
        const hoursMap = new Map(this.hoursMap);
        const minutesMap = new Map(this.minutesMap);
        const secondsMap = new Map(this.secondsMap);
        this.hourRotate = hoursMap.get(this.date.hour);
        this.minuteRotate = minutesMap.get(this.date.minute);
        this.secondRotate = secondsMap.get(this.date.second);
    }

    start() {
        setTimeout(() => {
            if (this.date.second <= 60) {
                this.date.second++;
                const r = 360 / 60 * (this.date.second - 1);
                this.secondDom.style.transform = 'rotate(' + r + 'deg)';
                this.minuteAdd();
                this.start();
            }
        }, 1000);
    }
    minuteAdd() {
        if (this.date.second === 60 + 1) {
            setTimeout(() => {
                this.secondDom.style.transform = 'rotate(0deg)';
                this.secondDom.style.transitionDuration = '0s';
                this.date.second = 1;
                setTimeout(() => {
                    this.secondDom.style.transform = 'rotate(0deg)';
                    this.secondDom.style.transitionDuration = '0.3s';
                }, 100);
                this.date.minute++;
                const r = 360 / 60 * (this.date.minute - 1);
                this.minuteDom.style.transform = 'rotate(' + r + 'deg)';
                this.hourAdd();
            }, 300);
        }
    }
    hourAdd() {
        if (this.date.minute === 60 + 1) {
            setTimeout(() => {
                this.minuteDom.style.transform = 'rotate(0deg)';
                this.minuteDom.style.transitionDuration = '0s';
                this.date.minute = 1;
                setTimeout(() => {
                    this.minuteDom.style.transform = 'rotate(0deg)';
                    this.minuteDom.style.transitionDuration = '0.3s';
                }, 100);
                this.date.hour++;
                const r = 360 / 24 * (this.date.hour - 1);
                this.hourDom.style.transform = 'rotate(' + r + 'deg)';
            }, 300);
        }
    }
    // 转换数字
    convertNum(num, type) {
        const arrMap: any = [
            ['0', '零'], ['1', '一'], ['2', '二'], ['3', '三'],
            ['4', '四'], ['5', '五'], ['6', '六'], ['7', '七'],
            ['8', '八'], ['9', '九'], ['10', '十']
        ];
        const map = new Map(arrMap);
        const numArr = num.toString().split('');
        const returnArr = [];
        let returnString = '';
        numArr.forEach((item, index) => {
            switch (type) {
                case '年':
                    returnArr.push(map.get(item));
                    break;
                case '月':
                case '日':
                case '时':
                case '分':
                case '秒':
                    if (numArr.length > 1) {
                        // 第一位
                        if (index === 0) {
                            if (item === '0') {
                            } else if (item === '1') {
                                returnArr.push(map.get('10'));
                            } else {
                                returnArr.push(map.get(item));
                                returnArr.push(map.get('10'));
                            }
                        } else if (index === 1) { // 第二位
                            if (item !== '0') {
                                returnArr.push(map.get(item));
                            }
                        }
                    } else {
                        returnArr.push(map.get(item));
                    }
                    break;
            }
        });
        returnArr.push(type);
        returnString = returnArr.join('');
        return returnString;
    }
}
